<!doctype html>
<html lang="en">
    <head>
        <link href="static/assets/img/在线教育.svg" rel="icon">
        <meta charset="UTF-8" />
        <title>智慧教育系统</title>
        <style>
            *{
            margin:0;
            padding:0;
            }

            body {
                background: #DDD;
            }

            .myCanvas {
                margin-top: 10px;
                margin-left: 10px;
                background: #FFF;
                border: thin solid #AAA;
            }
        </style>

    </head>

    <body>
            <script src="static/assets/vendor/jquery/jquery.min.js"></script>

            <canvas id="myCanvas" class="myCanvas" width="800px" height="800px">
                您的浏览器不支持canvas
                <!-- canvas标签内的内容只有在浏览器不支持canvas的情况下才显示出来 -->
            </canvas>

            <br/>
            <label for="strokeColorSelect">画笔颜色:</label>
            <select id="strokeColorSelect">
                <option value="black">黑色</option>
                <option value="blue">蓝色</option>
                <option value="green">绿色</option>
                <option value="yellow">黄色</option>
                <option value="red">红色</option>
            </select>

            <br/>
            <label for="strokeLineWidth">线条宽度:</label>
            <input type="number" id="strokeLineWidth">
            <input type="button" id="clear_btn" value="清除内容">
            <input type="button" id="return_btn" value="返回" onclick="window.location.href='/home'">


        <script type="text/javascript">

            const canvas = document.getElementById('myCanvas');//1.获取画布
            const ctx = canvas.getContext('2d');//2.获取上下文
            const strokeStyleSelect = document.getElementById('strokeColorSelect');//改变颜色控件
            const strokeLineWidth = document.getElementById('strokeLineWidth');//改变线条宽度控件

            //按下标记
            let isOnOff = false;
            let oldX = null;
            let oldY = null;

            //设置画笔颜色
            let lineColor = '#000';  //默认线条颜色为黑色

            //设置画笔线宽
            let lineWidth = 5;
            strokeLineWidth.value = lineWidth; //初始化输入框的值,显示初始线条宽度

            //添加鼠标移动事件
            canvas.addEventListener('mousemove', draw, false);
            //添加鼠标按下事件
            canvas.addEventListener('mousedown', down, true);
            //添加鼠标按下事件
            canvas.addEventListener('mouseup', up, false);

            function down(event) {
                isOnOff = true;
                oldX = event.clientX;
                oldY = event.clientY;
            }

            function up() {
                isOnOff = false;
            }

            function draw(event) {
                if (isOnOff === true) {
                    let newX = event.clientX;
                    let newY = event.clientY;

                    ctx.beginPath();
                    ctx.moveTo(oldX, oldY);
                    ctx.lineTo(newX, newY);
                    ctx.strokeStyle = lineColor;
                    ctx.lineWidth = lineWidth;
                    ctx.lineCap = 'round';
                    ctx.stroke();

                    oldX = newX;
                    oldY = newY;
                }
            }

            //监听下拉列表变化
            strokeStyleSelect.onchange = function () {
                lineColor = strokeStyleSelect.value;
            };

            //监听输入框变化
            strokeLineWidth.oninput = function () {
                lineWidth = strokeLineWidth.value;
            };

            //监听清除按钮
            $("#clear_btn").on("click",function (){
                canvas.height = 800;
            })


        </script>
    </body>

</html>